{% extends "base.html" %}

{% block title %}首页 - DRF 学习项目{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <!-- 项目介绍 -->
        <div class="text-center mb-5">
            <h1 class="display-4 mb-3">🚀 Django REST Framework 学习项目</h1>
            <p class="lead text-muted">一个专门用于学习 DRF 的示例项目，包含多种实现方式和最佳实践</p>
        </div>

        <!-- 功能特色 -->
        <div class="row mb-5">
            <div class="col-md-4 mb-3">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <div class="text-primary mb-3">
                            <i class="bi bi-layers-fill" style="font-size: 2rem;"></i>
                        </div>
                        <h5 class="card-title">多种视图类型</h5>
                        <p class="card-text">APIView、Generic Views、ViewSet 等 10 种不同实现方式</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <div class="text-success mb-3">
                            <i class="bi bi-gear-fill" style="font-size: 2rem;"></i>
                        </div>
                        <h5 class="card-title">序列化器对比</h5>
                        <p class="card-text">ModelSerializer 与手动 Serializer 的多种使用方式</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <div class="text-warning mb-3">
                            <i class="bi bi-shield-fill-check" style="font-size: 2rem;"></i>
                        </div>
                        <h5 class="card-title">权限认证</h5>
                        <p class="card-text">JWT 和 Session 认证，多种权限控制机制</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 快速导航 -->
        <div class="card mb-5">
            <div class="card-header">
                <h5 class="mb-0">🧭 快速导航</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <h6>📚 API 相关</h6>
                        <div class="list-group list-group-flush">
                            <a href="/api/" class="list-group-item list-group-item-action">
                                <strong>API 根目录</strong> - 浏览所有可用的 API
                            </a>
                            <a href="/swagger/" class="list-group-item list-group-item-action">
                                <strong>Swagger 文档</strong> - 交互式 API 文档 (drf-yasg)
                            </a>
                            <a href="/redoc/" class="list-group-item list-group-item-action">
                                <strong>ReDoc 文档</strong> - 美观的 API 文档 (drf-yasg)
                            </a>
                            <a href="/api-auth/login/" class="list-group-item list-group-item-action">
                                <strong>DRF 认证</strong> - REST Framework 认证页面
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6>🛠️ 管理功能</h6>
                        <div class="list-group list-group-flush">
                            <a href="/admin/" class="list-group-item list-group-item-action">
                                <strong>管理后台</strong> - Django 管理界面
                            </a>
                            {% if user.is_authenticated %}
                                <a href="{% url 'password_change' %}" class="list-group-item list-group-item-action">
                                    <strong>修改密码</strong> - 更改登录密码
                                </a>
                                <a href="{% url 'logout' %}" class="list-group-item list-group-item-action">
                                    <strong>退出登录</strong> - 登出当前账户
                                </a>
                            {% else %}
                                <a href="{% url 'login' %}" class="list-group-item list-group-item-action">
                                    <strong>用户登录</strong> - 登录系统
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- API 端点示例 -->
        <div class="card mb-5">
            <div class="card-header">
                <h5 class="mb-0">🔗 主要 API 端点</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>功能</th>
                                <th>端点</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>JWT 认证</td>
                                <td><code>/api/auth/token/</code></td>
                                <td>获取访问令牌</td>
                            </tr>
                            <tr>
                                <td>产品管理</td>
                                <td><code>/api/v1/products/</code></td>
                                <td>ViewSet 自动路由</td>
                            </tr>
                            <tr>
                                <td>分类管理</td>
                                <td><code>/api/categories/basic/</code></td>
                                <td>APIView 实现</td>
                            </tr>
                            <tr>
                                <td>图片上传</td>
                                <td><code>/api/products/{id}/upload-image/</code></td>
                                <td>Pillow 图片处理</td>
                            </tr>
                            <tr>
                                <td>统计分析</td>
                                <td><code>/api/products/stats/</code></td>
                                <td>复杂查询示例</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 测试账户信息 -->
        {% if not user.is_authenticated %}
        <div class="card">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0">🧪 测试账户</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>管理员账户</h6>
                        <p class="mb-1"><strong>用户名:</strong> admin</p>
                        <p class="mb-3"><strong>密码:</strong> admin123</p>
                        <small class="text-muted">拥有所有权限，可以访问管理后台</small>
                    </div>
                    <div class="col-md-6">
                        <h6>普通用户</h6>
                        <p class="mb-1"><strong>用户名:</strong> testuser</p>
                        <p class="mb-3"><strong>密码:</strong> test123</p>
                        <small class="text-muted">普通用户权限，可以测试权限控制</small>
                    </div>
                </div>
                <div class="text-center mt-3">
                    <a href="{% url 'login' %}" class="btn btn-info">立即登录</a>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 添加 Bootstrap Icons
    if (!document.querySelector('link[href*="bootstrap-icons"]')) {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css';
        document.head.appendChild(link);
    }
</script>
{% endblock %}
